import React, {Component, Fragment} from 'react';
import * as routerRedux from "react-router-redux";
import {connect} from 'dva';
import {Form, Card, Select, List, Tag, Icon, Avatar, Row, Popconfirm, Input, Button, Divider, Table} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment/moment';
import styles from './List.less';

export default @connect(({opration, loading}) => ({
  opration,
  loading: loading.models.list,
}))

class bannerList extends Component {
  componentDidMount() {
    this.fetchMore();
  }
  pageSize = 5;
  fetchMore = () => {
    const {dispatch} = this.props;
    dispatch({
      type: 'opration/fetch',
      payload: {
        type:"焦点图"
      },
    });
  };
  /*新增*/
  bannerAdd=()=>{
    this.props.dispatch(routerRedux.push({
      pathname: `/banner/add`,
    }))
  }
  /*详情*/
  bannerDetail = (id) => {
    this.props.dispatch(routerRedux.push({
      pathname: `/banner/detail/${id}`,
    }))
  }
  /*删除*/
  bannerDelete = (id) => {
    this.props.dispatch({
      type: 'opration/delete',
      payload: {id:id,type:"焦点图"},
    })
  }
  /*编辑*/
  bannerEdit = (id) => {
    this.props.dispatch(routerRedux.push({
      pathname: `/banner/edit/${id}`,
    }))
  }
  bannerColumns= [
    {
      title: '序号Id',
      dataIndex: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '缩略图',
      // dataIndex: 'status',
      dataIndex: "pic",
      render: val => <span><img src={val} width="30px" height="30px" alt=""/></span>,
    },
    {
      title: '链接',
      // dataIndex: 'status',
      dataIndex: "url"
    },
    {
      title: '点击次数',
      dataIndex: "count"
    },
    {
      title: '上线时间',
      dataIndex: 'createTime',
      sorter: (a, b) => Date.parse(a.createTime) > Date.parse(b.createTime),
      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '操作',
      render: (text, item) => (
        <Fragment>
          <a onClick={() => this.bannerEdit(item.id)}>修改</a>
          <Divider type="vertical"/>
          <Popconfirm onConfirm={() => this.bannerDelete(item.id)} title="确定删除该类别吗？"
                      icon={<Icon type="question-circle-o" style={{color: 'red'}}/>}>
            <a><Icon type="delete" style={{marginRight: 8}}/>删除</a>
          </Popconfirm>
          <Divider type="vertical"/>
          <a onClick={() => this.bannerDetail(item.id)}>详情</a>
        </Fragment>
      ),
    },
  ];
  render() {
    // const { match, children, location } = this.props;
    const {form, opration: {list}, loading,} = this.props;
    const IconText = ({type, text}) => (
      <span>
        <Icon type={type} style={{marginRight: 8}}/>
        {text}
      </span>
    );
    const loadMore =
      list.length > 0 ? (
        <div style={{textAlign: 'center', marginTop: 16}}>
          <Button onClick={this.fetchMore} style={{paddingLeft: 48, paddingRight: 48}}>
            {loading ? (
              <span>
                <Icon type="loading"/> 加载中...
              </span>
            ) : (
              '加载更多'
            )}
          </Button>
        </div>
      ) : null;

    const mainSearch = (
      <div style={{textAlign: 'center'}}>
        <Input.Search
          placeholder="请输入"
          enterButton="搜索"
          size="large"
          onSearch={this.handleFormSubmit}
          style={{width: 522}}
        />
      </div>
    );
    const ListContent = ({data: {summary, updateTime, createTime, avatar, author, href}}) => (
      <div className={styles.listContent}>
        <div className={styles.description}>{summary}</div>
        <div className={styles.extra}>
          <Avatar src={avatar} size="small"/>
          <a href={href}>{author}</a>
          <em>创建于：<Icon type="dashboard" style={{marginRight: 8}}/>{moment(createTime).format('YYYY-MM-DD HH:mm')}</em>
          <em>最后一次修改：<Icon type="dashboard" style={{marginRight: 8}}/>{moment(updateTime).format('YYYY-MM-DD HH:mm')}
          </em>
        </div>
      </div>
    );

    return (
      <PageHeaderWrapper
        title="焦点图列表"
      >
        <Card
          style={{marginTop: 24}}
          bordered={false}
          bodyStyle={{padding: '8px 32px 32px 32px'}}
        >
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => this.bannerAdd(true)}>
                新建
              </Button>
            </div>
            <Table
              loading={loading}
              dataSource={list}
              columns={this.bannerColumns}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
